<template>
  <div>
      <van-nav-bar
        title="市容顽症事件列表"
        left-text=""
        left-arrow
        :fixed="true"
        @click-left="onClickLeft"
      />
    <div class="header-choise">
      <div class="search-box" is-link @click="showSearch">
        <span class="search-text">搜索</span>
        <img class="search-icon" :src="searchIcon" />
      </div>
      <div class="filtrate-box" is-link @click="showFiltrate">
        <span class="filtrate-text">筛选</span>
        <img class="filtrate-icon" :src="filtrateIcon" />
      </div>
    </div>
    <div class="content">
       <scroller :on-infinite="onInfinite"
            :on-refresh="onRefresh"
　　         ref="my_scroller">
       <!-- 项目内容 -->
      <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          :offset="10"
          :immediate-check="false"
        >
        <div id="list-content"> -->
          <div v-for="(item,index) in list" class="content-box" :key="index">
              <div class="content-left" :style="{backgroundColor:((item.region == '人工上报')?'#4472C4':'#F57665')}"></div>
              <div class="content-right" :style="{background:((item.region == '人工上报')?'linear-gradient(90deg, rgba(68, 114, 196, 0.2), rgba(255, 255, 255, 0.2))':'linear-gradient(90deg, rgba(245, 118, 101, 0.2), rgba(255, 255, 255, 0.2))')}">
                  <div class="content-detail">
                    <div class="content-detail-text">{{item.eventType}}</div>
                    <div class="content-detail-time">
                      <span class="content-detail-time-lable" :style="{backgroundColor:((item.region == '人工上报')?'#4472C4':'#F57665')}">发现时间</span>
                      <span class="content-detail-time-value">{{item.time}}</span>
                    </div>
                    <div class="content-detail-event">
                      <span class="content-detail-event-lable" :style="{backgroundColor:((item.region == '人工上报')?'#4472C4':'#F57665')}">事件地址</span>
                      <span class="content-detail-event-value">{{item.region}}</span>
                    </div>
                  </div>
                  <div class="content-icon" @click="handDetail(item)"></div>
              </div>
          </div>
        <!-- </div> -->
        <!-- </van-list>
      </van-pull-refresh> -->
     </scroller>
    </div>
    <!-- search弹出框 -->
    <van-popup class="search-popup" v-model="searchShow"  position="bottom" :style="{ height: '10%' }" >
       <form action="/">
        <van-search
          class="search-popup-box"
          v-model="serchValue"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </van-popup>
    <!-- 筛选 -->
     <van-popup v-model="filtrateShow" closeable  close-icon-position="top-right" round position="bottom" :style="{ height: '42%' }">
      <div class="filtrate-popup-title">
        <div class="filtrate-popup-icon" @click="filtrateBtn" ></div>
        <div class="filtrate-popup-text">筛选</div>
      </div>
      <div class="filtrate-radio-box">
        <div class="filtrate-radio-title">案件类型</div>
        <div class="filtrate-radio-btn">
         <van-radio-group class="filtrate-radio-btn-box" v-model="radioType" @change="getRadioType">
            <van-radio name="垃圾箱溢满">垃圾溢满</van-radio>
            <van-radio name="小包垃圾丢弃">小包垃圾丢弃</van-radio>
            <van-radio name="建筑垃圾偷倒">建筑垃圾偷倒</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="filtrate-radio-box">
        <div class="filtrate-radio-title">网格编号</div>
        <div class="filtrate-radio-btn">
         <van-radio-group class="filtrate-radio-btn-box" v-model="radioGrid" @change="getRadioGrid">
            <van-radio name="0701">0701</van-radio>
            <van-radio name="0702">0702</van-radio>
            <van-radio name="0703">0703</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="filtrate-radio-box-special">
        <div class="filtrate-radio-title">事件状态</div>
        <div class="filtrate-radio-btn">
         <van-radio-group class="filtrate-radio-btn-box" v-model="radioAi" @change="getRadioAi">
            <van-radio name="待处置">待处置</van-radio>
            <van-radio name="已结案">已结案</van-radio>
            <van-radio name="事件到人">事件到人</van-radio>
            <van-radio name="到人待结案">到人待结案</van-radio>
          </van-radio-group>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { listPageList } from '../../../utils/api';
export default {
  name: "eventList",
  data() {
    return {
      searchIcon:require('@/assets/img/workingEvents/search.png'),
      filtrateIcon:require('@/assets/img/workingEvents/filtrate.png'),
      list:[
        // {typevalue:'建筑垃圾偷倒',currentDate:'2021-01-01 10:10',findkind:'AI智能发现',address: "大吉路01号",gridvalue: "0702网格",picAi:["https://img01.yzcdn.cn/vant/ipad.jpeg","https://img01.yzcdn.cn/vant/ipad.jpeg",],pic: ["https://img01.yzcdn.cn/vant/cat.jpeg","https://img01.yzcdn.cn/vant/cat.jpeg",]},
        // {typevalue:'建筑垃圾偷倒',currentDate:'2021-02-02 10:10',findkind:'人工上报',address: "黄浦02号",gridvalue: "0702网格",picAi:["https://img01.yzcdn.cn/vant/ipad.jpeg","https://img01.yzcdn.cn/vant/ipad.jpeg",],pic: ["https://img01.yzcdn.cn/vant/cat.jpeg","https://img01.yzcdn.cn/vant/cat.jpeg",]},
      ],
      searchShow:false,
      serchValue:'',
      filtrateShow:false,
      radioType: '建筑垃圾偷倒',
      radioGrid:'0703',
      radioAi:'待处置',
      // filtrateType:'',
      // filtrateGrid:'',
      // filtrateAi:'',

      // data:'',
      // total:'',   //总条数
      // page:1,     //页码
      // raw:10,     //每页条数
      // isLoading: false,
      // loading: false,
      // finished: false,
      // dataList:'', //list存储
      currPage:1,
      pageCount:'',

      pubEventStatus:'',
      pubEventType:'',
      pubOwnerGrid:'',
      pubRegion:'',

    };
  },
  mounted() {
    this.onRefresh(done)
  },
  methods: {
    //下拉刷新方法
    onRefresh(done){
      // this.$refs.my_scroller.finishPullToRefresh()
      this.onRefreshPort(done);
    },
    //下拉刷新接口
    onRefreshPort(done){
      let that = this;
      let param = {
        eventStatus: that.pubEventStatus,
        eventType: that.pubEventType,
        ownerGrid: that.pubOwnerGrid,
        region: that.pubRegion,
        currPage : 1,
        pageSize : 10
      };
      listPageList(param).then((res)=>{
        if(res.code === 200){
          that .list = [];
          that.list = res.data.list;
          for(let i =0;i<that.list.length;i++){
            that.list[i].eventType = that.list[i].eventType == '0'?'建筑垃圾偷倒':(that.list[i].eventType == '1'?'小包垃圾丢弃':'垃圾溢满');
            that.list[i].region = that.list[i].region == 'person'?'人工上报':'AI发现';
          }
          // this.list = that.currentlist;
          done();
        }else{
          Toast.fail(res.message)
        }
      })
    },
    //上拉加载
    onInfinite(done) {
       this.onInfinitePort(done);
    },
    //上拉加载接口
    onInfinitePort(done){
      let that = this;
      that.currPage ++;
      let param = {
        eventStatus: that.pubEventStatus,
        eventType: that.pubEventType,
        ownerGrid: that.pubOwnerGrid,
        region: that.pubRegion,
        currPage : that.currPage,
        pageSize : 10
      };
      listPageList(param).then((res)=>{
        if(res.code === 200){
          if(that.currPage >= res.data.totalCount) {
            Toast.fail('没有更多数据')
          }else{
            let datas = res.data.list;
            for(let i =0;i<datas.length;i++){
              datas[i].eventType = datas[i].eventType == '0'?'建筑垃圾偷倒':(datas[i].eventType == '1'?'小包垃圾丢弃':'垃圾溢满');
              datas[i].region = datas[i].region == 'person'?'人工上报':'AI发现';
            }
            that.list = that.list.concat(datas);
            done();
          }
        }else{
          Toast.fail(res.message)
        }
      })
    },
    //获取数据请求接口
    // getDate(param){
    //   listPageList(param).then((res)=>{
    //     if(res.code === 200){
    //       let data = [];
    //       data = res.data.list;
    //       for(let i =0;i<data.length;i++){
    //         data[i].eventType = data[i].eventType == '0'?'建筑垃圾偷倒':(data[i].eventType == '1'?'小包垃圾丢弃':'垃圾溢满');
    //         data[i].region = data[i].region == 'person'?'人工上报':'AI发现';
    //       }
    //       this.list = [];
    //       this.list = data;
    //     }else{
    //       Toast.fail(res.message)
    //     }
    //   })
    // },
    // //下拉刷新
    // onRefresh() {
    //   this.page = 1
    //   this.finished = false
    //   let params = {
    //     eventStatus: this.pubEventStatus,
    //     eventType: this.pubEventType,
    //     ownerGrid: this.pubOwnerGrid,
    //     region: this.pubRegion,
    //     currPage : this.page,
    //     pageSize : this.raw
    //   }
    //   this.getDate(params)
    // },
    // //上拉加载
    // onLoad() {
    //   // 异步更新数据
    //   this.page++;
    //   let that = this;
    //   let params = {
    //     eventStatus: that.pubEventStatus,
    //     eventType: that.pubEventType,
    //     ownerGrid: that.pubOwnerGrid,
    //     region: that.pubRegion,
    //     currPage : that.page,
    //     pageSize : that.raw
    //   }
    //   that.getDate(params)
    // },
    showSearch(){
      this.searchShow = true
    },
    //搜索
    onSearch(val) {
      this.dataList = this.list;
      let datas = [];
      this.list.forEach(e => {
        if(e.eventType == val){
          datas.push(e)
        }
      });
      this.list = [];
      this.list = datas;
      this.searchShow = false;
      // Toast(val);
    },
    //取消搜索
    onCancel() {
      this.searchShow = false;
      Toast('取消');
    },
    showFiltrate(){
      this.filtrateShow = true
    },
    //案件类型
    getRadioType(val){
      this.radioType = val
    },
    //网格类型
    getRadioGrid(val){
      this.radioGrid = val;
    },
    //发现上报
    getRadioAi(val){
      this.radioAi = val;
    },
    filtrateBtn(){
      let that = this;
      that.pubEventType = that.radioType == '建筑垃圾偷倒'?'0':(that.radioType == '小包垃圾丢弃'?'1':'2');
      that.pubOwnerGrid = that.radioGrid;
      that.pubEventStatus = that.radioAi == '待处置'?'0':(that.radioAi = '事件到人'?'1':(that.radioAi = '到人待结案'?'2':'3'));
       let param = {
        eventStatus: that.pubEventStatus,
        eventType:  that.pubEventType,
        ownerGrid: that.pubOwnerGrid,
        region: that.pubRegion,
        currPage : that.page,
        pageSize : that.raw
      }
      that.getDate(param)
    },
    //头部返回
    onClickLeft() {
      this.$router.push({ path: "/" });
    },
    // 事件详情
    handDetail(index){
      if(index.region === '人工上报'){
        this.$router.push({name:'eventListPeoReportDetail',params: {detail:index.id}})
      }else{
        this.$router.push({name:'eventListAiReportDetail',params: {detail:index.id}})
      }
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.header-choise{
  width: 100%;
  height: 34px;
  background: #DAF4F1;
  display: flex;
  justify-content: space-between;
  margin-top: 11%;
}
.search-box{
  width: 56px;
  height: 34px;
  display: flex;
  margin-left: 20px;
}
.search-text{
  display: inline-block;
  width: 40px;
  height: 34px;
  font-size: 15px;
  font-weight: 400;
  color: #04BFAC;
  line-height: 34px;
}
.search-icon{
  width: 16px;
  height: 20px;
  margin: auto 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.filtrate-box{
  width: 56px;
  height: 34px;
  display: flex;
  margin-right: 20px;
}
.filtrate-text{
  display: inline-block;
  width: 40px;
  height: 34px;
  font-size: 15px;
  font-weight: 400;
  color: #04BFAC;
  line-height: 34px;
}
.filtrate-icon{
  width: 16px;
  height: 20px;
  margin: auto 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content{
  width: 94%;
  height: 650px;
  margin: auto;
  overflow-y: auto;
  position: relative;
}
.content::-webkit-scrollbar {display: none;}
.content-box{
  width: 100%;
  height: 95px;
  display: flex;
  margin: 5px 0;
}
.content-left{
  width: 1.5%;
  height: 100%;
  border-radius: 5px;
}
.content-right{
  margin-left: 5px;
  width: 98%;
  /* background: linear-gradient(90deg, rgba(245, 118, 101, 0.2), rgba(255, 255, 255, 0.2)); */
  box-shadow: 0px 0px 9px 0px rgba(205, 205, 205, 0.45);
  border-radius: 5px;
  display: flex;
}
.content-detail{
  width: 86%;
  height: 100%;
  padding-left: 10px;
}
.content-detail-text{
  width: 100%;
  height: 40px;
  font-size: 15px;
  font-weight: bold;
  color: #3E3D44;
  line-height: 40px;
}
.content-detail-time{
  width: 100%;
  height: 17px;
  display: flex;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
}
.content-detail-time-lable{
  display: inline-block;
  width: 60px;
  height: 17px;
  text-align: center;
  /* box-shadow: 0px 0px 9px 0px rgba(153, 153, 153, 0.45); */
  border-radius: 2px;
  color: #FFFFFF;
  margin-right: 5px;
}
.content-detail-time-value{
  color: #181818;
}
.content-detail-event{
  width: 100%;
  height: 17px;
  display: flex;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  margin-top: 7px;
}
.content-detail-event-lable{
   display: inline-block;
  width: 60px;
  height: 17px;
  text-align: center;
  /* box-shadow: 0px 0px 9px 0px rgba(153, 153, 153, 0.45); */
  border-radius: 2px;
  color: #FFFFFF;
  margin-right: 5px;
}
.content-detail-event-value{
  color: #181818;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content-icon{
  width: 19px;
  height: 18px;
  margin: auto;
  background-image: url('~@/assets/img/workingEvents/router-right.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.search-popup-box .van-search__action{
  color: #00c4c6;
}


.filtrate-popup-title{
  margin-top: 15px;
  width: 86%;
  margin-left: 5%;
  display: flex;
}
.filtrate-popup-icon{
  width: 18px;
  height: 16px;
  background-image: url('~@/assets/img/workingEvents/selected.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.filtrate-popup-text{
  width: 100%;
  text-align: center;
}
.filtrate-radio-box{
  width: 94%;
  height: 60px;
  margin: 10px auto 0px;
}
.filtrate-radio-box-special{
  width: 94%;
  height: 60px;
  margin: 10px auto 0px;
}
.filtrate-radio-title{
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  font-weight: normal;
  color: #999999;
}
.filtrate-radio-btn{
  width: 100%;
  margin: 5px 0;
  height: 30px;
}
.filtrate-radio-btn-box{
  display: flex;
  /* justify-content: space-around; */
}
</style>
